<template>
  <el-row id="product3" :gutter="30" >
    <h5>UI 设计</h5>
    <div :offset="3" class="tubiao">
      <div class="items">
        <div class="item"><img src="../../assets/images/ui1.png" alt=""></div>
        <div class="item"><img src="../../assets/images/ui2.png" alt=""></div>
        <div class="item"><img src="../../assets/images/ui3.png" alt=""></div>
        <div class="item"><img src="../../assets/images/ui4.png" alt=""></div>
        <div class="item"><img src="../../assets/images/ui5.png" alt=""></div>
        <div class="item"><img src="../../assets/images/ui6.png" alt=""></div>
      </div>
    </div>
  </el-row>
</template>
<style>
  #product3 h5 {margin-bottom: 56px; margin-top:40px}
  .tubiao {margin-bottom: 29px;}
  .tubiao .el-col {overflow: hidden}




  .tubiao {
    /*指定观察者与平面的距离，使有透视效果*/
    /*若无法正常3d效果，将perspective属性提到更上一个父容器即可(此处已上提，从items-->container)*/
    perspective: 1000px;
    /*让container的伪类有过渡效果--51-54行*/
    /*transition: all 1s;*/
  }
  .items {
    width: 200px;
    height: 400px;
    margin: 200px auto;
    /*指定子元素定位在三维空间内*/
    transform-style: preserve-3d;
    /*让所有item的父级元素（即items）旋转，item就是围绕着旋转了*/
    animation: autoMove 10s infinite linear;

  }
  .item {
    width: 200px;
    height: 200px;
    opacity: .6;
    font-size: 200px;
    line-height: 200px;
    text-align: center;
    position: absolute;
  }

  .item:hover {
    opacity: 1;
  }
  /*定义自动旋转的动画*/
  @keyframes autoMove {
    from { }
    to {
      transform: rotateY(-360deg);
    }
  }
  .items:hover {
    /*鼠标移入 暂停动画*/
    animation-play-state: paused;
    opacity: 1;
  }
  .tubiao:hover {
    /*鼠标移入，绕Z轴旋转90deg*/
    /*transform: rotateZ(90deg);*/
  }
</style>
<script>
  export default {
    mounted (){
        var itemNum = 6;//要旋转的div的数量
        var itemDeg = 360 / itemNum;//计算平均偏移角度，后面的itemDeg*index是不同索引div的偏移角度
        var item = document.getElementsByClassName('item');

        for (var i = 0; i<item.length; i++) {
          (function (i , item) {
              Velocity(item[i], { rotateY:   (itemDeg *  i) + "deg" ,translateZ:"280px"}, { duration: 0 })
            })(i , item)
        }
    }
  }
</script>
